import { Box, Flex, Heading, keyframes } from '@chakra-ui/react';
import { motion } from 'framer-motion';
import ImageUploaderButton from '../ImageUploader/ImageUploaderButton';

const rotate1 = keyframes`
    from { transform: rotateX(50deg) rotateZ(110deg); }
    to { transform: rotateX(50deg) rotateZ(470deg); }
`;
const rotate2 = keyframes`
  from { transform: rotateX(20deg) rotateY(35deg) rotateZ(20deg); }
  to { transform: rotateX(20deg) rotateY(35deg) rotateZ(380deg); }
`;
const rotate3 = keyframes`
    from { transform: rotateX(30deg) rotateY(145deg) rotateZ(450deg); }
    to { transform: rotateX(30deg) rotateY(145deg) rotateZ(90deg); }
  `;

export default function Hero() {
  const ringSx = {
    width: '25rem',
    height: '25rem',
    // borderRadius: '40%',
    position: 'absolute',
    // borderBottom: '16px solid',
    bg: 'blackAlpha.300',
  };

  return (
    <Flex
      justify="center"
      align="center"
      w="full"
      h="full"
      gap="4"
      flexDirection="column"
    >
      {/* <Heading
        bgGradient="linear(to-l, #7928CA, #FF0080)"
        bgClip="text"
        fontSize="5xl"
        fontWeight="extrabold"
        pb="6"
      >
        一 键 分 色
      </Heading> */}
      <Flex
        justify="center"
        align="center"
        position="relative"
        w="30rem"
        h="30rem"
      >
        <Box
          as={motion.div}
          sx={ringSx}
          borderRadius="45%"
          animation={`${rotate1} 10s linear infinite`}
        ></Box>
        <Box
          as={motion.div}
          sx={ringSx}
          borderRadius="45%"
          animation={`${rotate2} 12s linear infinite`}
        ></Box>
        <Box
          as={motion.div}
          sx={ringSx}
          borderRadius="45%"
          animation={`${rotate3} 11s linear infinite`}
        ></Box>
        <Flex justify="center" align="center">
          <ImageUploaderButton />
        </Flex>
      </Flex>
    </Flex>
  );
}
